var chart3 = null;
var option3 = null;

$(document).ready(function(){
   var chart1 = echarts.init( document.getElementById('ccEchart1') );
    var option1 = {
        calculable: true,
        grid: {
            borderWidth: 0,
            y: 80,
            y2: 60
        },
        grid:{
            width:'90%',
            x:'30'

        },
        xAxis: [
            {
                axisLabel:{
                    interval:0,
                    textStyle:{
                        fontSize:'12px'
                    }
                },
                axisLine:{
                    show:false
                },
                axisTick:{
                    show:false
                },
                type: 'category',
                show: true,
                data: ['30岁及以下', '31-35岁', '36-40岁','41-45岁','46-50岁','51-55岁','56-60岁','61-65岁','66-70岁','71岁及以上']
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        series: [
            {
                name: '',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#cdcdcd', '#a1c2d2', '#abd0e1','#56c9ff','#1eb7ff','#00a2ee','#038dce','#0574a8','#105271','#044462'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                },
                data: [4,5,3,8,7,3,2,1,4,3]
            }
        ]
    };
    chart1.setOption(option1);


    var chart2 = echarts.init( document.getElementById('ccEchart2') )
    var option2 = {
        title : {
            text: '',
            subtext: '',
            x:'center'
        },
        tooltip : {
            show:true,
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'',
                type:'pie',
                radius : [10, 100],
                center : ['50%', '50%'],
                roseType : 'area',
                x: '50%',               // for funnel
                max: 40,                // for funnel
                clockWise:false,
                data:[
                    { value:1,name:'学生'},
                    {value:2, name:'其他职业人员'},
                    {value:2, name:'农牧渔民'},
                    {value:3, name:'企事业单位、\n民办非企业单位\n管理人员'},
                    {value:4, name:'企事业单位、\n民办非企业单位\n专业技术人员'},
                    {value:5, name:'企事业单位、\n民办非企业单位\n非专业技术人员'},
                    {value:6, name:'工人\n(工勤技能人员)'},
                    {value:6, name:'党政机关\n工作人员'}
                ],
                itemStyle: {
                    normal: {
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#ff6d74', '#ffa54b', '#ffd65d','#bdf256','#87cd9b','#84c0e3','#9e96cd','#ffa9fb'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            formatter: '{b}',
                            show: true,
                            position: 'top',
                            textStyle:{
                                color:'#666',
                                fontSize:'12px',
                                fontWeight:'bord'
                            }
                        }
                    }
                }
            }
        ]
    };
    chart2.setOption(option2);

    chart3 = echarts.init( document.getElementById('ccEchart3') );
    option3 = {
        title : {
            text: '',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        grid:{
            y:'40'
        },
        legend: {
            data:['领导讲话','党章学习','党史学习','两学一做'],
            y:'bottom'
        },
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                name:'阅读量',
                type : 'category',
                boundaryGap : false,
                data : ['7月24日','7月25日','7月26日','7月27日','7月28日','7月29日','7月30日','7月31日','8月1日','8月2日']
            }
        ],
        yAxis : [
            {
                name:'条',
                type : 'value',
                axisLabel : {
                    formatter: '{value}'
                }
            }
        ],
        series : [
            {
                name:'领导讲话',
                type:'line',
                data:[0,1,3,5,3,2,5,6,8,4]
            },
            {
                name:'党章学习',
                type:'line',
                data:[5,2,6,4,2,3,0,2,5,7]
            },
            {
                name:'党史学习',
                type:'line',
                data:[0,3,1,8,1,7,5,2,2,5]
            },
            {
                name:'两学一做',
                type:'line',
                data:[3,2,1,0,5,4,3,6,7,2]
            }

        ]

    };
    chart3.setOption(option3);

    var chart4 =  echarts.init( document.getElementById('ccEchart4') );
    var option4 = {
        title : {
            text: '',
            subtext: ''
        },
        tooltip : {
            trigger: 'item',
            enterable: true
        },
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        xAxis : [
            {
                type : 'time',
                boundaryGap: [0.05,0.1]
            }
        ],
        grid:{
            borderWidth:0,
            backgroundColor:'rgba(0,0,0,0.1)'
        },
        legend: {
            show:false,
            data:['两学一做主题活动', '两学一做知识竞赛','建党95周年主题活动','团日活动','2017年学雷锋纪念活动']
        },
        series : [
            {
                "name": "两学一做主题活动",
                "type": "eventRiver",
                "weight": 123,
                "data": [
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-01-03",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    },
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-02-04",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    },
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-03-05",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    },
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-04-06",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            formatter: '{a}{b}',
                            show: true,
                            position: 'top',
                            textStyle:{
                                color:'#666',
                                fontSize:'12px'
                            }
                        }
                    }
                }
            },
            {
                "name": "两学一做知识竞赛",
                "type": "eventRiver",
                "weight": 123,
                "data": [
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-02-13",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    },
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-03-14",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    },
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-02-19",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            formatter: '{a}{b}',
                            show: true,
                            position: 'top',
                            textStyle:{
                                color:'#666',
                                fontSize:'12px'
                            }
                        }
                    }
                }
            },
            {
                "name": "建党95周年主题活动",
                "type": "eventRiver",
                "weight": 123,
                "data": [
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-03-21",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    },
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-1-22",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    },
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-02-23",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            formatter: '{a}{b}',
                            show: true,
                            position: 'top',
                            textStyle:{
                                color:'#666',
                                fontSize:'12px'
                            }
                        }
                    }
                }
            },
            {
                "name": "团日活动",
                "type": "eventRiver",
                "weight": 123,
                "data": [
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-04-7",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    },
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-2-9",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    },
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-3-13",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            formatter: '{a}{b}',
                            show: true,
                            position: 'top',
                            textStyle:{
                                color:'#666',
                                fontSize:'12px'
                            }
                        }
                    }
                }
            },
            {
                "name": "2017年学雷锋纪念活动",
                "type": "eventRiver",
                "weight": 123,
                "data": [
                    {
                        "name": "1次",
                        "weight": 123,
                        "evolution": [
                            {
                                "time": "2017-04-27",
                                "value": 10,
                                "detail": {
                                    "text": ""
                                }
                            }
                        ]
                    }
                ],
                itemStyle: {
                    normal: {

                        label: {
                            formatter: '{a}{b}',
                            show: true,
                            position: 'top',
                            textStyle:{
                                color:'#666',
                                fontSize:'12px'
                            }
                        }
                    }
                }
            }
        ]
    };


    chart4.setOption(option4);

    $('#ccTimePicker').daterangepicker(null, function(start, end, label) {
        console.log(start.toISOString(), end.toISOString());
    });
});

//阅读量 、被点击 、被评论 点击事件
$('.cc-btn-group > div').on('click',function(){
   if( this.classList.contains('cc-btn-active') ) {
       return;
   }else{
       $('.cc-btn-group > div').removeClass('cc-btn-active');
       this.classList.add('cc-btn-active');

       var xtitle = this.innerText;
       option3.xAxis[0].name = xtitle;
       chart3.setOption(option3);
   }
});

//近7天、近30天 点击事件
$('.cc-time-btn-group .cc-time-btn').on('click',function(){
    if( this.classList.contains('cc-time-active') ) {
        return;
    }else{
        $('.cc-time-btn-group .cc-time-btn').removeClass('cc-time-active');
        this.classList.add('cc-time-active');
    }
});